<template>
    <div>
        <a-modal v-model="updateVisible" title="修改商品" v-bind="layout" @ok="handleOk">
            <a-form-model ref="updateForm"  v-bind="layout">
                <a-form-model-item has-feedback label="商品名称" prop="name">
                    <a-input v-model="product.name" />
                </a-form-model-item>
                <a-form-model-item  label="封面图片" >
                    <a-upload
                        action="/api/upload"
                        list-type="picture"
                        :multiple="true"
                        :file-list="product.indexImageList"
                        @change="changeIndexImage"
                        >
                        <a-button> <a-icon type="upload" /> 上传 </a-button>
                        </a-upload>
                </a-form-model-item>
               <a-form-model-item has-feedback label="细节图片" prop="detail_images">
                    <a-upload
                        action="/api/upload"
                        list-type="picture"
                        :multiple="true"
                        :file-list="product.detailImageList"
                        @change="changeDetailImage"
                        >
                        <a-button> <a-icon type="upload" /> 上传 </a-button>
                        </a-upload>
                </a-form-model-item>
               
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
import {update} from '../../services/product'
import {imageListToArray} from '../../utils'
import {mapState,mapMutations} from 'vuex'
export default {
    data(){
        return {
           
            rules:{
               
            },
            layout: {
                labelCol: { span: 4 },
                wrapperCol: { span: 16 },
            },
        }
    },
   
    computed:{
        ...mapState('product',['visible','product']),
        updateVisible:{
            get(){
                return this.$store.state.product.visible;
            },
            set(visible){
                this.setVisible(visible );
            }
        }
    },
    methods:{
        ...mapMutations('product',['setVisible']),
        async handleOk(){
            console.log("indexImageList",this.product.indexImageList)
            // await add(this.addForm);
            
            let data = {...this.product,
                        indexImages:imageListToArray(this.product.indexImageList),
                        detailImages:imageListToArray(this.product.detailImageList)}
            delete data.indexImageList;
            delete data.detailImageList;
            console.log('data',data)
            // console.log(data);
            await update(data);
            this.setVisible(false);
            // this.visible = false;
            this.$emit("show");
        },
      
        changeIndexImage({fileList}){
            this.product.indexImageList = fileList;
        },
        changeDetailImage({fileList}){
            this.product.detailImageList = fileList;
        }


    
    }
};
</script>

<style>
</style>